<template>
  <wd-config-provider :themeVars="themeVars">
    <div class="generalLayout">
      <wd-navbar
        v-if="pageMsg.navigationBarTitleText"
        :title="pageMsg.navigationBarTitleText"
        :left-text="pageMsg.leftText"
        :left-arrow="pageMsg.leftArrow"
        @click-left="handleClickLeft"
      ></wd-navbar>
      <main>
        <slot />
      </main>
      <wd-tabbar v-model="tabbar" @change="handleChangeTab">
        <wd-tabbar-item name="home" title="首页" icon="home"></wd-tabbar-item>
        <wd-tabbar-item name="add" title="记账" icon="add"></wd-tabbar-item>
        <wd-tabbar-item name="chart" title="图表" icon="chart-bar"></wd-tabbar-item>
        <wd-tabbar-item name="user" title="我的" icon="user"></wd-tabbar-item>
      </wd-tabbar>
    </div>
    <wd-toast />
    <wd-message-box />
  </wd-config-provider>
</template>

<script lang="ts" setup>
import type { ConfigProviderThemeVars } from 'wot-design-uni'
import pagesConfig from '@/pages.json'
const themeVars: ConfigProviderThemeVars = {
  // colorTheme: '#5c33be',
  // buttonPrimaryBgColor: '#07c160',
  // buttonPrimaryColor: '#07c160',
}
const tabbar = ref('home')

const props = defineProps({
  navConf: {
    type: Object,
    default: () => ({
      title: '标题',
      leftText: '',
      leftArrow: false,
    }),
  },
})
const initConf = {
  navigationBarTitleText: '蓝莓记账',
  leftText: '',
  leftArrow: false,
}
const page = getCurrentPages().at(-1)
const pagePath = page.route
const pages = pagesConfig.pages
const pageStyle = pages.find((p) => p.path === pagePath)?.style || {}
const pageMsg = Object.assign(initConf, pageStyle)
// console.log('🚀 ~ page:', {
//   page: page,
//   pageStyle,
//   options: page.$vm.$page.meta.navigationBar.titleText,
// })
const handleClickLeft = () => {
  uni.navigateBack()
}

const handleChangeTab = ({ value }: { value: string }) => {
  console.log('🚀 ~ handleChangeTab ~ name:', value)
  if (value === 'home') {
    uni.navigateTo({ url: '/pages/keepAccount/index' })
  } else if (value === 'add') {
    uni.navigateTo({ url: '/pages/keepAccount/addAccount' })
  } else if (value === 'chart') {
    uni.navigateTo({ url: '/pages/keepAccount/statistics' })
  } else if (value === 'user') {
    uni.navigateTo({ url: '/pages/user/user' })
  }
}
</script>

<style scoped lang="scss">
.generalLayout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  > main {
    flex: 1;
    height: 100px;
  }
}
</style>
